import React from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { AntDesign } from "@expo/vector-icons";
import { Entypo } from "@expo/vector-icons";
import { FontAwesome5 } from "@expo/vector-icons";
const PreAdminHome = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <View style={[styles.card, { borderBottomWidth: 0 }]}>
        <View>
          <Text style={styles.title}>资讯查看</Text>
        </View>
        <View style={styles.titleGap}></View>
        <View style={styles.optionGroup}>
          <TouchableOpacity
            style={styles.option}
            onPress={() => navigation.navigate("Requirement")}
          >
            <AntDesign name="team" size={30} color="#8ABAFF" />
            <Text style={styles.optionText}>总体要求</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.option}
            onPress={() => navigation.navigate("Organization")}
          >
            <AntDesign name="API" size={30} color="#A9D67C" />
            <Text style={styles.optionText}>组织架构</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.option}
            onPress={() => navigation.navigate("Formulation")}
          >
            <AntDesign name="calendar" size={30} color="#F47C68" />
            <Text style={styles.optionText}>工作方案</Text>
          </TouchableOpacity>
        </View>
      </View>
      <View style={[styles.card, { borderBottomWidth: 0 }]}>
        <View>
          <Text style={styles.title}>组内情况</Text>
        </View>
        <View style={styles.titleGap}></View>
        <View style={styles.optionGroup}>
          <TouchableOpacity
            style={styles.option}
            onPress={() => navigation.navigate("TestViewing")}
          >
            <Entypo name="text-document" size={30} color="#8ABAFF" />
            <Text style={styles.optionText}>试卷查看</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.option}
            onPress={() => navigation.navigate("ScoreManage")}
          >
            <AntDesign name="barschart" size={30} color="#A9D67C" />
            <Text style={styles.optionText}>成绩查询</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.option}
            onPress={() => navigation.navigate("ResearchManage")}
          >
            <AntDesign name="form" size={30} color="#F47C68" />
            <Text style={styles.optionText}>调研报告</Text>
          </TouchableOpacity>
        </View>
      </View>
      <View style={styles.card}>
        <View>
          <Text style={styles.title}>样本村</Text>
        </View>
        <View style={styles.titleGap}></View>
        <View style={styles.optionGroup}>
          <TouchableOpacity
            style={styles.option}
            onPress={() => navigation.navigate("SampleVillageManage")}
          >
            <AntDesign name="book" size={30} color="#8ABAFF" />
            <Text style={styles.optionText}>样本村管理</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.option}
            onPress={() => navigation.navigate("SampleVillageSelected")}
          >
            <FontAwesome5 name="chalkboard" size={26} color="#F47C68" />
            <Text style={styles.optionText}>样本村发布</Text>
          </TouchableOpacity>
        </View>
      </View>
      <View style={{ width: "100%", height: "15%" }}></View>
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    flex: 1,
  },
  card: {
    justifyContent: "center",
    alignItems: "center",
    borderBottomColor: "#eee",
    borderBottomWidth: 1,
    borderTopColor: "#eee",
    borderTopWidth: 2,
    // paddingBottom: 10,
  },
  title: {
    fontSize: 18,
    padding: 3,
    marginTop: 10,
  },
  titleGap: {
    backgroundColor: "#41C3EE",
    height: 2,
    width: "8%",
  },
  optionGroup: {
    flexDirection: "row",
    justifyContent: "space-around",
    width: "100%",
    paddingTop: 10,
    paddingBottom: 5,
  },
  option: {
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  optionText: {
    marginTop: 5,
  },
});

export default PreAdminHome;
